<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap - 增删改查</title>
    <script src="./js/jquery.js"></script>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/bootstrap.min.js"></script>
</head>

<body>
    <div class="row text-center">
        <h1>员工信息管理 </h1>
    </div>
    <!-- 表格 -->
    <div class="container" style="padding-top: 40px;">
        <div class="form-group">
            <div class="row">
                <div class="col-md-8">
                    <div class="col-sm-5">
                        <input type="text" class="form-control swich" id="bookNameSearch" placeholder="书籍名称" />
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class="form-control swich" id="authorSearch" placeholder="作者" />
                    </div>
                    <button class="btn btn-danger sreach">搜索</button>
                </div>
                <div class="col-md-3">
                    <button class="btn btn-default add" data-toggle="modal" data-target="#myModel">
                        增加
                    </button>
                </div>
            </div>
        </div>
        <table class="table table-bordered text-center">
            <tr>
                <td>头像</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>入职时间</td>
                <td>所在部门</td>
                <td>职位</td>
                <td>联系电话</td>
                <td>薪水</td>
            </tr>
            <tbody id="showMessage">

            </tbody>
        </table>

        <div class="row">
            <div id="show_page_info" class="col-md-4" style="line-height: 80px">

                <!-- 当前<span id="pageNumNow"></span>页,总<span id="AllPageNum"></span>页,总共<span id="AllUserNum"></span>条记录 -->
            </div>
            <div id="show_page_nav" class="col-md-8 text-right">
                <nav aria-label="Page navigation">
                    <ul class="pagination" id="pagination">          
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <!-- 修改的模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="编号" id="id" class="form-control" disabled />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="书籍名称" id="bookName" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="作者" class="form-control" id="author" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="出版时间" class="form-control" id="publicationdate" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="书籍价格" class="form-control" id="price" />
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    
    <!-- 增加的模态框 -->
    <div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">增加信息</h4>
                </div>
                <div class="modal-body">
                    <form id="bookAddForm" enctype="multipart/form-data">
                        <div class="form-group">
                            <input type="file" placeholder="头像" id="picAdd" name="pic"
                                class="form-control" />
                        </div>
                        <div class="form-group">
                            <img id="showPic" src="" class="img-thumbnail">
                        </div>

                        <div class="form-group">
                            <input type="text" placeholder="姓名" class="form-control" id="nameAdd" name="name" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="性别" class="form-control" id="sexAdd"
                                name="sex" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="出生日期" id="birthDateAdd" class="form-control" name="birthDate" />
                        </div>
                        <div class="form-group">
                            <input type="text"  placeholder="入职时间" id="hireDateAdd" class="form-control" name="hireDate" />
                        </div>
                        <div class="form-group">
                            <input type="text"  placeholder="所在部门" id="department" class="form-control" name="department" />
                        </div>
                        <div class="form-group">
                            <input type="text"  placeholder="职位" id="jobTitleAdd" class="form-control" name="jobTitle" />
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary aad" data-dismiss="modal">增加信息</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <script>
    //获取上传元素
       let bookFile = document.getElementById("#picAdd");
       $("#picAdd").on('change',function () {
            // 只处理第一个被选中的文件
            let file = this.files[0];
            console.log(file);
            // 这里可以根据需要执行更多操作，比如预览图片、上传文件等
            let url = URL.createObjectURL(file)
            console.log(url);
            $('#showPic').attr("src",url)
        }
       )

        $(function () {
            var pageNum = 1
            onleadOk(pageNum);
        })
        //页面加载
        function onleadOk(pageNum) {
            $.ajax({
                url: "http://localhost:8080/employee/page",
                type: 'get',
                data: {
                    pageNum: pageNum    //页面加载第几页
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    // if(!data.status){
                    //     alert(data.message);
                    // }
                    var tbody = $("#showMessage")
                    

                    //分页信息
                    let pageInfo = $("#show_page_info");

                    pageInfo.empty();

                    let span = `当前${data.pageNum}页,总${data.pages}页，总共${data.total}条记录`;

                    pageInfo.append(span);

                    var pageBox = $("#pageBox");
                    pageBox.empty();

                    tbody.empty(); // 清空现有的表格内容

                    //分页列
                    let pagination = $("#pagination");
                    pagination.empty();

                    //判断是否是首页
                    let firstdis = data.isFirstPage ? "disabled" : "";

                    //判断是否是末页
                    let enddis = data.isLastPage ? "disabled" : "";



                    //首页
                    let firstLi = `<li class="${firstdis}" jumpPageNum="1">
                                  <a href="javascript:;"><span>首页</span></a>
                                  </li>`;
                    pagination.append(firstLi);

                    let firstLiIcon = `<li class="${firstdis}" jumpPageNum="1">
                                  <a href="javascript:;"><span>&laquo;</span></a>
                                  </li>`;
                    pagination.append(firstLiIcon);


                    //循环页码
                    for (var i = 1; i <= data.pages; i++) {
                        let active = '';
                        if (i == data.pageNum) {
                            active = 'active';
                        }
                        let li = `<li class="${active}" jumpPageNum="${i}">
                                  <a href="javascript:;"><span>${i}</span></a>
                                  </li>`;
                        pagination.append(li);
                    }

                    //末页
                    let endLiIcon = `<li class="${enddis}" jumpPageNum="${data.pages}">
                                      <a href="javascript:;"><span>&raquo;</span></a>
                                      </li>`;
                    pagination.append(endLiIcon);

                    let endLi = `<li class="${enddis}" jumpPageNum="${data.pages}">
                                         <a href="javascript:;">末页</a>
                                  </li>`;
                    pagination.append(endLi);

                    data.list.forEach(function (book) {
                        //展示图片
                        let bookPathUrl = book.pathUrl;
                        if(bookPathUrl == null){
                            bookPathUrl = " ";
                        }else{
                            bookPathUrl = "http://localhost:8080/"+bookPathUrl;
                        }
                        var row = `<tr>
                                <td>
                                    <img src="${bookPathUrl}" width="100px" height="100px;class="img-thumbnail" />
                               </td>
                                <td>${book.empName}</td>
                                <td>${book.birthDate}</td>
                                <td>${book.hireDate}</td>
                                <td>${book.department.departmentName}</td>
                                <td>${book.jobTitle}</td>
                                <td>

                                    <button class="btn btn-primary rev" 
                                    data-toggle="modal" data-target="#myModal"
                                    onclick="updateBook(${book.employeeId})">修改</button>
                                    <button class="btn btn-danger del" onclick="deleteUser(${book.employeeId})">删除</button>
                                </td>
                            </tr>
                        `;
                        tbody.append(row);
                    });
                },
            });
        }
        //删除的功能
        //$(document).on("click", ".del", function () {
        //    $(this).parents("tr").remove()
        //})
        function deleteUser(id) {
            alert(id)
            $.ajax({
                url: "http://localhost:8080/books/" + id,
                type: 'delete',
                success: function (data) {
                    console.log(data);
                    alert(data.message);
                    onleadOk(1);
                    // if(data===1){
                    //   alert('删除成功')
                    // }
                }
            })
        }
        //改的功能
        let book = {};
        function updateBook(id) {

            //获取后台数据

            $("#id").val(id);
            alert(id);
            $.ajax({
                url: "http://localhost:8080/books/" + id,
                type: "get",
                contentType: "application/json",
                success: function (data) {
                    console.log(data);
                    $("#id").val(data.id);
                    $("#bookName").val(data.bookName);
                    $("#author").val(data.author);
                    $("#publicationdate").val(data.publicationdate);
                    $("#price").val(data.price);
                    book = JSON.stringify(data);
                }
            })
        }
        $(document).on("click", ".olk", function () {
            console.log(book);
            book = JSON.parse(book);
            book.bookName = $("#bookName").val();
            book.author = $("#author").val();
            book.publicationdate = $("#publicationdate").val();
            book.price = $("#price").val();
            book.data.pathUrl = $("#bookImgFile").val();
            
            $.ajax({
                url: 'http://localhost:8080/employee',
                type: 'put',
                contentType: 'application/json', // 设置Content-Type
                data: JSON.stringify(book), // 发送JSON格式的数据
                success: function (data) {
                    console.log(data);
                    alert('修改成功！')
                    var bookName = $("#bookNameSearch").val();
                    var author = $("#authorSearch").val();
                    onleadOk(bookName, author, 1); // 刷新列表
                }
            });
            //_this.find("td:not(:last)").each(function (i) {
            //    $(this).text(_arr[i])
            //})
        })
        //增加的功能
        // 在点击增加按钮时处理数据并发送
        $(document).on("click", ".aad", function () {
             //获取表单元素
            let form = document.querySelector("#bookAddForm");
            let formData = new FormData(form);

            // 使用JSON.stringify来确保发送的是一个JSON字符串
            $.ajax({
                url: 'http://localhost:8080/employee',
                type: 'post',
                data: formData, // 发送JSON格式的数据
                cache:false,//设置喂false，不需要从不浏览器缓存，默认为true
                processData:false,//对数据的处理方式，默认为true，会将数据处理为对象格式
                contentType: false, // 设置Content-Type
                
                success: function (data) {
                    console.log(data);
                    alert('新增成功！')
                    onleadOk(1); // 刷新列表
                }
            });
            //清楚表单数据
            $("#myModel").find("input").each(function () {
                $(this).val("")
            });
        });
        //查的功能
        $(".sreach").click(function () {
                onleadOk(1)
        });
        //点击页码，局部刷新
        $(document).on("click", "#pagination li", function () {
            onleadOk($(this).attr("jumpPageNum"));
        });
    </script>
</body>
</html>